<template>
  <div :class="$style.wrapper">
    <slot></slot>
    <div :class="$style.pagination">
      <el-pagination
        :current-page.sync="page.currentPage"
        :hide-on-single-page="false"
        :page-size.sync="page.size"
        :page-sizes="[10, 20,  50, 100]"
        :pager-count="5"
        :total="total"
        @current-change="currentChangeHandler"
        @size-change="sizeChangeHandler"
        background
        layout="sizes, total, ->, prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>
<script>
/**
 * This is a component file.
 * Generate By lanaya-generate Automatically.
 * Author: Dennis
 * Date: 2020-7-17 15:53:51
 */
export default {
  name: 'PsTable',
  data () {
    return {
      page: {
        size: 10,
        currentPage: 1
      }
    };
  },
  methods: {
    currentChangeHandler (currentPage) {
      let pageObj = {
        length: this.page.size,
        start: (currentPage - 1) * this.page.size
      };
      this.$emit('page-change', pageObj);
    },
    sizeChangeHandler (pageSize) {
      let pageObj = {
        length: pageSize,
        start: 1
      };
      this.page.currentPage = 1;
      this.$emit('page-change', pageObj);
    }
  },
  /** 点击查询按钮，恢复第一页查询 */
  watch: {
    currentPage: function (newVal, oldVal) {
      this.page.currentPage = newVal || 1;
    }
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    }
  }
};
</script>

<style lang="scss" module>
@import './../../../../src/style/default/PsTable.scss';
</style>
